<template>
  <view>
    <u-popup :show="showPopup" :round="10" mode="bottom" @close="close" @open="open" closeable>
      <view class="popup-wrap">
        <view class="give-name">打赏糖果</view>
        <view class="number-add">
          <u-number-box v-model="value">
            <view slot="minus" class="minus">
              <!-- <u-icon name="minus" size="12"></u-icon> -->
              <view class="minus-remove">
                -
              </view>
            </view>
            <text slot="input" style="width: 50px;text-align: center;" class="input">{{value}}</text>
            <view slot="plus" class="plus">
              <!-- <u-icon name="plus" color="#FFFFFF" size="12"></u-icon> -->
              <view class="plus-add active">
                +
              </view>
            </view>
          </u-number-box>
        </view>
        <!--  <u-keyboard ref="uKeyboard" mode="number" :show="showkeyboard"></u-keyboard> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: "RewardModel",
    props: {
      showPopup: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showkeyboard: true,
        value: 1,
        inputValue: '', // 输入值
        numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9] // 数字列表
      };
    },
    methods: {
      open() {

      },
      close() {
        this.$emit('closePopup', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup-wrap {
    padding: 50rpx 0;
  }

  .give-name {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    position: relative;
    text-align: center;
  }

  .number-add {
    display: flex;
    align-items: center;
    justify-content: center;

    .minus-remove,
    .plus-add {
      width: 90rpx;
      height: 90rpx;
      background: #F6F6F6;
      border-radius: 24rpx;
      font-size: 42rpx;
      text-align: center;
      line-height: 90rpx;
      font-weight: bold;
    }

    .active {
      background: #ED79BE;
      border-radius: 24rpx;
      opacity: 0.9;
      margin-top: 60rpx;
      margin-bottom: 50rpx;
    }
  }
</style>